<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>DEMO - 手柄的玄学实验室</title>
    <script src="../avg.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <style>
        * {
            border: 0;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script>
        //let imgObj = avg.loadImgObjFromSrc("image/gifExample.gif");
        randomArr = ["罗马不是一天建成的", "聚沙成塔，积少成多", "怕什么？反正隔壁某引擎09年开始做的", "这么咸鱼的手柄又在痴心妄想", "可喜可贺，可喜可贺", "毕业前一定要完成啊！"];
        avg.creaveWindow({
            width: 1280,
            height: 720,
            //backgroundColor: "#1099bb",
            defaultFont: "20px Arial,'Microsoft Yahei'"
            //volumeBGM : 0.7,
            //volumeSE : 0.7,
            //volumeVoice : 0.7,
            //defaultFontColor: "#AAA"
            //refresh: 100 //刷新频率（毫秒）
        });
        avg.wait(2000);
        avg.playBGM({
            src: "audio/Cycles.mp3"
            //默认 volume:1
        });
        avg.loadImage({ layer: 1, src: "image/background/logo.png", alpha: 0 });
        avg.loadText({
            layer: 9,
            text: "——" + randomArr[parseInt(Math.random() * randomArr.length)],
            font: "italic 20px Arial,'Microsoft Yahei'",
            color: "#020202",
            x: 24,
            y: 690,
            alpha: 0
        });
        avg.move({ layer: 9, alpha: 1 }, 1000);
        avg.move({ layer: 1, alpha: 1 }, 1000);
        avg.wait(3500);
        avg.move({ layer: 9, alpha: 0 }, 1000);
        avg.move({ layer: 1, alpha: 0 }, 1000);
        //avg.wait(500);
        avg.waitByFrame(60);
        avg.playBGM({
            src: "audio/testBGM.mp3"
            //默认 volume:1
        });
        avg.loadImage({ layer: 1, src: "image/background/bg1.jpg", x: 0, y: -40, alpha: 0 });
        avg.move({ layer: 1, alpha: 1 }, 1000);
        avg.wait(500);
        avg.loadText({
            layer: 10,
            text: "不成熟的停放中页面",
            font: "italic 36px Arial,'Microsoft Yahei'",
            color: "#cee5f5",
            x: 820,
            y: 568,
            alpha: 0
        });
        avg.move({ layer: 10, x: 844, alpha: 1 }, 1000);
        avg.loadText({
            layer: 11,
            text: "代表着一个美好的愿景",
            font: "italic 36px Arial,'Microsoft Yahei'",
            color: "#cee5f5",
            x: 850,
            y: 614,
            alpha: 0
        });
        avg.wait(500);
        avg.move({ layer: 11, x: 874, alpha: 1 }, 1000);
        avg.loadText({
            layer: 12,
            text: "图片作者 geralt ，来自 pixabay",
            font: "12px Arial,'Microsoft Yahei'",
            color: "#cee5f5",
            x: 1056,
            y: 692,
            alpha: 0
        });
        avg.loadText({
            layer: 13,
            text: "音乐来自 musmus-musmus.main.jp",
            font: "12px Arial,'Microsoft Yahei'",
            color: "#cee5f5",
            x: 1056,
            y: 708,
            alpha: 0
        });
        avg.wait(500);
        avg.move({ layer: 12, x: 1080, alpha: 0.5 }, 500);
        avg.wait(250);
        avg.move({ layer: 13, x: 1080, alpha: 0.5 }, 500);
        avg.wait(500);

        /**
         * @type {HTMLElement}
         */
        const dom = avg.getDOM();
        let mouseX = 0, mouseY = 0;
        // function mouseMoveFun(e) {
        //     //mouseX = e.clientX - dom.getBoundingClientRect().left;
        //     //mouseY = e.clientY - dom.getBoundingClientRect().top;
        //     mouseX = avg.mouse.x;
        //     mouseY = avg.mouse.y;
        //     avg.loadText({
        //         layer: 16,
        //         text: `${mouseX}px,${mouseY}px`,
        //         font: "12px Arial,'Microsoft Yahei'",
        //         color: "#cee5f5",
        //         x: 20,
        //         y: 22,
        //         alpha: 1
        //     });
        // }
        // dom.addEventListener("mouseover",mouseMoveFun);
        // dom.addEventListener("mousemove", mouseMoveFun);
        dom.addEventListener("click", e => {
            avg.playSE({
               src: "audio/game_over.mp3"
            //默认 volume:1
            });
        });
        avg.run(function () {
            avg.run(() => { console.log("First Time runFunction"); });
            avg.run(() => {
                avg.loadImage({
                    layer: 15,
                    src: "image/gifExample.png",
                    x: 0,
                    y: 0,
                    width: 100,
                    height: 100
                });
                //中断run 特性
                avg.break(2);
                console.log("No Output");
                requestAnimationFrame(function raf(t) {
                    avg.loadText({
                        layer: 16,
                        text: `${mouseX}px,${mouseY}px`,
                        font: "12px Arial,'Microsoft Yahei'",
                        color: "#cee5f5",
                        x: 20,
                        y: 22,
                        alpha: 1
                    });
                    requestAnimationFrame(raf);
                });
            });
        });
        avg.wait(1000);
        avg.run(() => {
            console.log("runSuccess1");
            avg.loadImage({
                layer: 15,
                src: "image/gifExample.png",
                x: 0,
                y: 0,
                width: 100,
                height: 100
            });
            avg.loadImage({
                layer: 17,
                src: "image/gifExample.png",
                x: 50,
                y: 50,
                width: 100,
                height: 100
            });
            avg.loadImage({
                layer: 18,
                src: "image/gifExample.png",
                x: 0,
                y: 0,
                width: 100,
                height: 100,
                mask: "shade"
            });
            avg.loadImage({
                layer: 19,
                src: "image/gifExample.png",
                x: 50,
                y: 250,
                width: 100,
                height: 100
            });
            avg.loadImage({
                layer: 20,
                src: "image/gifExample.png",
                x: 0,
                y: 200,
                width: 100,
                height: 100,
                mask: "mask"
            });
            let speed = 6;
            let speedX = 6;
            let yPos = 0;
            let xPos = 0;
            avg.loop(() => {
                yPos += speed;
                xPos += speedX;
                if (xPos > 1180) {
                    xPos = 1180;
                    speedX *= -1;
                }
                if (xPos < 0) {
                    xPos = 0;
                    speedX *= -1;
                }
                if (yPos >= 620) {
                    yPos = 620;
                    speed *= -1;
                }
                if (yPos < 0) {
                    yPos = 0;
                    speed *= -1;
                }
                avg.move({
                    layer: 15,
                    x: xPos,
                    y: yPos
                }, 0);
                avg.loadText({
                    layer: 16,
                    text: `${avg.mouse.x}px,${avg.mouse.y}px`,
                    font: "12px Arial,'Microsoft Yahei'",
                    color: "#cee5f5",
                    x: 20,
                    y: 22,
                    alpha: 1
                });
                avg.waitByFrame(1);
            });
        });
        avg.run(function () {
            console.log("runSuccess2");
        });
    </script>
</body>